<template>
	<div class="words-draw-wrap">
		<img v-if="wordsSvg" :src="wordsSvg" crossOrigin="*" />
	</div>
</template>

<script setup>
import { watch, ref, onMounted } from "vue"
// api
import { jsonFile } from "@/api"
// 汉字顺序
import { wordsDraw } from "@/utils/wordsDraw"
const props = defineProps({
	words: {
		type: String,
		default: ''
	},
	isDraw: Boolean
})
const { useDraw } = wordsDraw({
  width: 200,
  height: 200
})
const wordsData = ref(null)
const wordsSvg = ref(null)

const wordsDrawSvg = (svg) => {
	wordsSvg.value = svg
}

const startDraw = () => {
	console.log('wordsSvg.value', wordsSvg.value)
	if(wordsSvg.value) {
		const copy = JSON.parse(JSON.stringify(wordsData.value))
		useDraw(copy).then(res => {
			wordsDrawSvg(res)
		})
		return
	}
	jsonFile(props.words).then((r) => {
		wordsData.value = JSON.parse(JSON.stringify(r))
		useDraw(r).then(res => {
			wordsDrawSvg(res)
		})
	})
}

onMounted(() => {
	props.isDraw && startDraw()
})
</script>

<style lang="scss" scoped>
.words-draw-wrap {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	image {
		width: 100%;
		height: 100%;
	}
}
</style>